﻿@page "/utilities/spacing"

<Pager Title="空间(Spacing)" Description="采用了链式变成调用的方式">
	<Demo Title="示例">
		<Run>
		<Element Margin="Margin.Is3" BgColor="BgColor.Success" TextColor="TextColor.White">Margin 3</Element>
		<Element Padding="Padding.Is5" BgColor="BgColor.Success" TextColor="TextColor.White">Padding 5</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element Margin=""Margin.Is3"">Margin 3</Element>
<Element Padding=""Padding.Is5"">Padding 5</Element>
```
")
		</Code>
	</Demo>
	<Demo Title="响应式">
				<Run>
		<Element Margin="Margin.Is3.Is1.OnXS" BgColor="BgColor.Success" TextColor="TextColor.White">Margin.Is3.Is1.OnMobile</Element>
		<Element Padding="Padding.Is5.OnXL.Is2.OnXS.Is3" BgColor="BgColor.Success" TextColor="TextColor.White">Padding.Is5.OnLargeScreen.Is2.OnMobile.Is3</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element Margin=""Margin.Is3.Is1.OnMobile"">Margin.Is3.Is1.OnMobile</Element>
<Element Padding=""Padding.Is5.OnLargeScreen.Is2.OnMobile.Is3"">Padding.Is5.OnLargeScreen.Is2.OnMobile.Is3</Element>
```
")
		</Code>
	</Demo>
</Pager>